<template>
    <div class="yuan-container demand-docking">
        <a-spin tip="Loading..." :spinning="loading">
            <a-card title="需求对接">
                <a-tabs type="card" v-model="state" @change="tabChange">
                    <a-tab-pane v-for="item in typeArr" :key="item.state" :tab="item.title"></a-tab-pane>
                </a-tabs>
                <div class="table">
                    <div class="page-list" v-for="item in pageList">
                        <div class="list-imgbox">
                            <img class="list-img" :src="item.coverImageUrl" />
                        </div>

                        <div class="list-mid">
                            <div class="list-title">
                                {{item.demandName}}
                                <template v-if="item.subCategory">
                                    <span class="my-type-list" style="margin-left:10px;font-size:12px"
                                        v-for="category in (JSON.parse(item.subCategory))">{{category}}</span>
                                </template>

                            </div>
                            <div class="list-content">对接成果：{{item.achievementName}}</div>
                            <div class="list-content">需求简介：{{splitContent(item.technicalDescription || '')}}</div>
                            <div class="proline-parent">
                                <div class="proline-box line-box">
                                    <template v-for="(sch,idx) in schList">
                                        <div class="proline-list proline-line" :class="getProlineClass(sch,item)"></div>
                                    </template>

                                </div>
                                <div class="proline-box">
                                    <template v-for="(sch,idx) in schList">
                                        <div class="proline-list proline-words" :class="getProlineWordsClass(sch,item)">
                                            {{sch.title}}
                                        </div>
                                    </template>
                                </div>
                            </div>
                            <!-- <div class="list-userbox">
                                        <img class="list-user-img" :src="require('@/assets/img/test.png')" />
                                        <span>XX科技</span>
                                    </div> -->

                        </div>

                        <div style="padding:0 20px" :class="getStateClass(item.state)" v-if="item.abutmentAuditState!==2">
                            {{getTypeWords(item.state)}}
                        </div>
                        <div style="padding:0 20px" v-if="item.state===2 && item.deliverDifferentiate===0">
                            等待需求方反馈
                        </div>
                        <div style="padding:0 20px" class="c-danger" v-else-if="item.abutmentAuditState===2">
                            对接审核失败：{{item.abutmentRefuseCause}}
                        </div>
                        <div class="list-right">
                            <a-button type="warning" class="list-btn" @click="jumpDetail(item.demandId)">需求详情</a-button>
                            <template v-if="item.state===2">
                                <!-- 0成果投递需求  1需求找成果 -->
                                <a-button type="primary" class="list-btn" v-if="item.deliverDifferentiate!==0"
                                    @click="clickMatch(item)">需求对接</a-button>
                            </template>
                            <template v-if="item.state===3 ">
                                <template v-if="item.abutmentAuditState===null">
                                    <!-- 未提交对接审核 -->
                                    <a-button type="primary" class="list-btn" @click="clickDockingAuth(item)">提交审核</a-button>
                                </template>


                                <!-- 已通过对接审核 未提交公示审核 -->
                                <!-- 未填写公示信息 -->
                                <!-- <template v-else-if="item.abutmentAuditState==1&&item.formulaAuditState===null">
                                    
                                    <a-button type="primary" class="list-btn" v-if="item.ifFillInFormula===0"
                                        @click="clickAddInfo(item)">填写公示信息</a-button>

                                    <a-button type="primary" class="list-btn" @click="clickAuth(item)" v-else>提交审核</a-button>
                                </template> -->

                            </template>

                        </div>

                    </div>
                    <div class="page-content" v-if="pageList.length===0">
                        <div class="list-null">
                            <div class="iconfont">&#xe642;</div>
                            <div>暂无数据</div>
                        </div>

                    </div>
                </div>

            </a-card>
        </a-spin>
        <a-modal width="600px" title="需求对接" :visible="matchVisible" @cancel="()=>matchVisible=false">
            <a-spin tip="Loading..." :spinning="matchLoading">
                <div>是否与该需求进行对接？</div>

            </a-spin>
            <template slot="footer">
                <a-button @click="matchCancel" type="danger" :loading="matchLoading">
                    取消对接
                </a-button>
                <a-button @click="matchSure" type="primary" :loading="matchLoading">
                    确认对接
                </a-button>
                <a-button @click="matchVisible=false" :loading="matchLoading">
                    关闭
                </a-button>
            </template>
        </a-modal>
        <AddAnnInfo :visible="addAnnVisible" @closeModal="() => addAnnVisible = false" :addAnnId="addAnnId"
            :detailInfo="addAnnInfo" @resetList="getPageList" />
    </div>
</template>
<script lang="ts">
import api from "@/api/api";
import { Component, Vue } from "vue-property-decorator";
import DetailVue from "./detail.vue";
import RecommendVue from "./recommend.vue";
import UserVue from "@/components/addUserModal.vue";
import config from "@/utils/config";
import AddAnnInfo from "./addAnnInfo.vue";
@Component({
    name: "tpl",
    components: { DetailVue, RecommendVue, UserVue, AddAnnInfo },
})
export default class extends Vue {
    schList = [
        { title: "对接中", val: 2 },
        { title: "待审核", val: 3 },
        { title: "已完成", val: 4 },
        // { title: "已公示", val: 5 },
    ];
    typeArr = [
        { title: "全部对接", state: "" },
        { title: "对接中需求", state: "2" },
        { title: "转化成功", state: "4" },
    ];
    loading = false;
    async mounted() {
        this.getPageList();
    }

    pageList: any[] = [];
    state = "";
    async getPageList() {
        this.loading = true;
        try {
            const res = await api.getDemandMatching({ state: this.state });
            this.pageList = res.data;
        } finally {
            this.loading = false;
        }
    }
    tabChange(e: string) {
        this.state = e;
        this.getPageList();
    }
    splitContent(str: string) {
        return str.slice(0, 25) + "...";
    }

    getTypeWords(state) {
        return config.achType[state];
    }
    getStateClass(state) {
        const obj = {
            2: "c-warning",
            3: "c-primary",
            4: "c-success",
            5: "c-success",
            6: "c-danger",
        };
        return obj[state] || "";
    }
    jumpDetail(id: string) {
        window.open(config.clientUrl + "/#/demandDetail?id=" + id);
    }

    matchLoading = false;
    matchVisible = false;
    matchData: any = {};
    async matchCancel() {
        this.matchLoading = true;
        try {
            const res = await api.matchAch({
                id: this.matchData.id,
                achievementState: 6,
                demandState: 5,
                type: 0,
            });
            this.$message.success("匹配已取消");
            this.getPageList();
            this.matchVisible = false;
        } finally {
            this.matchLoading = false;
        }
    }
    async matchSure() {
        this.matchLoading = true;
        try {
            const res = await api.matchAch({
                id: this.matchData.id,
                achievementId: this.matchData.achievementId,
                demandId: this.matchData.demandId,
                achievementState: 3,
                demandState: 3,
                type: 1,
            });
            this.$message.success("匹配成功，请等待审核");
            this.getPageList();
            this.matchVisible = false;
        } finally {
            this.matchLoading = false;
        }
    }
    async clickMatch(item) {
        this.matchVisible = true;
        this.matchData = item;
    }

    getProlineClass(sch, item) {
        if (item.state === 6) {
            if (sch.val === 2) {
                return "proline-timeout";
            } else {
                return "proline-after";
            }
        }
        if(item.abutmentAuditState===2){
            if(sch.val===3){
                return "proline-timeout";
            }
        }
        if (item.state > sch.val) {
            return "proline-over";
        } else if (item.state === sch.val) {
            return "proline-on";
        } else if (item.state < sch.val || item.state === null) {
            return "proline-after";
        }
    }
    getProlineWordsClass(sch, item) {
        if (item.state === 6) {
            if (sch.val === 2) {
                return "proline-words-timeout";
            } else {
                return "proline-words-after";
            }
        }
        if(item.abutmentAuditState===2){
            if(sch.val===3){
                return "proline-words-timeout";
            }
        }
        if (item.state > sch.val) {
            return "proline-words-over";
        } else if (item.state === sch.val) {
            return "proline-words-on";
        } else if (item.state < sch.val || item.state === null) {
            return "proline-words-after";
        }
    }

    addAnnVisible = false;
    addAnnId = "";
    addAnnInfo = {};
    clickAddInfo(item) {
        this.addAnnInfo = item;
        this.addAnnId = item.id;
        this.addAnnVisible = true;
    }

    clickAuth(item) {
        this.$confirm({
            title: "确定要提交吗？",
            okText: "确定",
            cancelText: "取消",
            onOk: async () => {
                const res = await api.submitFormulaInfoAudit({
                    id: item.achievementId,
                });
                this.getPageList();
                this.$message.success(res.msg);
            },
            onCancel: () => {
                console.log("Cancel");
            },
        });
    }
    clickDockingAuth(item) {
        this.$confirm({
            title: "确定要提交吗？",
            okText: "确定",
            cancelText: "取消",
            onOk: async () => {
                const res = await api.submitAbutmentAudit({
                    id: item.id,
                });
                this.getPageList();
                this.$message.success(res.msg);
            },
            onCancel: () => {
                console.log("Cancel");
            },
        });
    }
}
</script>
<style scoped lang="scss">
.demand-docking {
    .page-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }
    .page-list::after {
        content: "";
        width: calc(100% - 170px);
        border-bottom: solid 1px #eee;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .list-imgbox {
        width: 160px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .list-img {
        max-width: 100%;
        max-height: 100%;
    }
    .list-user-img {
        width: 30px;
        height: 30px;
        border-radius: 30px;
        margin-right: 5px;
    }
    .list-mid {
        flex-grow: 1;
        padding: 10px 15px;
    }
    .list-title {
        font-size: 16px;
        color: #333;
        font-weight: bold;
    }
    .list-content {
        font-size: 14px;
        color: #333;
        margin-top: 5px;
    }
    .list-userbox {
        margin-top: 5px;
        font-size: 16px;
        color: #333;
    }
    .list-right {
        width: 150px;
        flex-shrink: 0;
    }
    .list-btn {
        display: block;
        margin-bottom: 5px;
    }

    .proline-parent {
        padding: 5px 0;
        text-align: left;
        line-height: 16px;
    }
    .proline-box {
        display: flex;
        margin-top: 20px;
    }
    .line-box {
        margin-bottom: 5px;
        transform: translateX(5px);
        display: flex;
    }
    .proline-list {
        display: inline-block;
        width: 100px;
        flex-shrink: 0;
        color: #82848a;
    }
    .proline-line {
        height: 2px;
        background-color: #f9f9f9;
    }
    .proline-line:last-child {
        width: 10px;
        background-color: transparent;
    }
    .proline-line::before {
        content: "";
        width: 10px;
        height: 10px;
        display: inline-block;
        border-radius: 10px;
        background-color: #fff;
        vertical-align: top;
        position: relative;
        top: -4px;
    }
    .proline-timeout {
        background-color: rgba(130, 132, 138, 0.5);
    }
    .proline-timeout::before {
        background-color: #fe3d3d;
    }

    .proline-over {
        background-color: rgba(27, 196, 109, 1);
    }
    .proline-over::before {
        background-color: #1bc46d;
    }
    .proline-after {
        background-color: rgba(130, 132, 138, 0.5);
    }
    .proline-after::before {
        //background-color: #82848A;
        border: solid 1px #82848a;
    }
    .proline-on {
        background-color: rgba(130, 132, 138, 0.5);
    }
    .proline-on::before {
        background-color: #1bc46d;
    }

    .proline-words {
        padding: 0 2px;
    }
    .proline-words-over {
        color: #333;
    }
    .proline-words-on {
        color: #333;
    }
    .proline-words-after {
        opacity: 0.5;
    }
    .proline-words-timeout {
        color: #fe3d3d;
    }
}
</style>
